<template>
  <view class="container">

    <view v-if="searchHistory.length > 0">
      <text class="sou">搜索:</text>
      <view class="allbox">
        <view v-for="(item, index) in searchHistory" :key="index" @click="handleClick(item)">
          <view class="item">
            <view class="text">
              <image src="/static/images/tabbar/dingwei.png" class="img"/>
              <view class="add">
                {{ item.address }}
              </view>
            </view>
            <view class="all">
              {{ item.allAddress }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <text class="sou">暂无历史搜索记录</text>
    </view>
    <button @click="clearHistory">清除历史记录</button>
  </view>
</template>

<script>
import { searchHistory , addHistory , deleteHistory } from "@/api/durian/search/search.js";

export default {
  data() {
    return {
      searchHistory: [],
      name: undefined
    };
  },
  onLoad() {
    this.loadSearchHistory();
  },
  methods: {
    loadSearchHistory() {
      searchHistory(this.name).then(res => {
        this.searchHistory = res.rows;
      })
    },
    clearHistory() {
      deleteHistory().then(res => {
        this.$modal.showToast('删除成功！！');
        this.loadSearchHistory();
      })
    },
    handleClick(keyword) {
      var id = keyword.mapId;
      addHistory(id).then(res => {
        // console.log(res)
      })
    },

    //监听原生标题导航点击事件
    onNavigationBarButtonTap(e) {
      if (e.index == 0) {
        uni.navigateBack({
          delta: 1
        })
      }
    },

    //监听搜索框文本变换
    onNavigationBarSearchInputChanged(e) {
      // console.log("监听文本搜索变化" + JSON.stringify(e.text))
      // this.name = JSON.stringify(e.text);
      // this.loadSearchHistory();
    },
    //监听点击搜索按钮事件
    onNavigationBarSearchInputConfirmed(e) {
      // this.searchAddress()
      // console.log("监听点击搜索事件"+JSON.stringify(e.text))
      this.name = e.text;
      this.loadSearchHistory();
    }
  },
};
</script>

<style>
.container {
  padding: 10px;
}
.img{
  width: 20px;
  height: 20px;
}
.item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-top: 10px;
  padding-bottom: 10px;
  //border-radius: 10px;
  //background-color: white;
  border-bottom: 1px solid #c4c4c4;
}
.text{
  display: flex;
  align-items: center;
}
.add{
  font-size: 16px;
}
.all{
  font-size: 12px;
  margin-top: 5px;
  margin-left: 19px;
  color: #9a9a9a;
}
.allbox{
  border-radius: 10px;
  background-color: white;
}
.sou{
  paddingn-top: 10px;
  font-size: 16px;
}
</style>





